<template>
  <div class="home-container">
    <header>
      <h2>Interview</h2>
    </header>
    <div class="home-main-content">
      <div class="wrap">
        <home-mainnav></home-mainnav>
        <div class="goto-page">
          <img src="@/assets/images/go.png" alt="">
        </div>
      </div>

      <div class="floteer" v-for="(item, index) in floterDatas" :key="index">
        <job-guaid v-if="index==0" :floterData=item></job-guaid>
        <charge-study v-if="index==1" :floterData=item></charge-study>
      </div>
        
    </div>
  </div>
</template>

<script>

import HomeMainnav from '@/views/home/components/home-mainnav.vue'
import JobGuaid from '@/views/home/components/job-guaid.vue'
import ChargeStudy from '@/views/home/components/charge-study.vue'

export default {
  data(){
    return {
      floterDatas:[{
        icons: require("@/assets/icons/i1.png"),
        title: '就业指导'
      }, {
        icons: require("@/assets/icons/i2.png"),
        title: '充电学习'
      }]
    }
  },
  components:{
    HomeMainnav,
    JobGuaid,
    ChargeStudy,
  }
}
</script>

<style lang="less" scoped>

.home-container{
  width: 100%;
  height: 100%;

  header{
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #eee;

    h2{
      font-size: 20px;
      text-align: center;
      font-weight: 400;
      line-height: 44px;
    }
  }

  .home-main-content{
    width: 100%;
    height: 100%;
    background-color: #f2f4f7;

    .wrap{
      width: 100%;
      height: 100%;
      background-color: #fff;
      overflow: hidden;

      .goto-page{
        width: 100%;
        padding: 5px;
        margin: 10px 0;
      }
    }
  }

  .floteer{
    width: 100%;
    height: 100%;
  }
}

</style>